<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/common.js"></script>
    <style>
        .container{
            width: 1500px;
            margin-left: (100%-1500px);
            
        }
        .container-left {
            height: 100%;
            width: 200px;
            float: left;
            margin-left: 5px;
        }
        .content{
            width: 400px;
            height: calc(100% - 80px);
            /* border: 1px solid red; */
            background-color: #FFFFFF;
            border-radius: 10px;
            /* position: relative; */
            /* display: flex; */
            float: left;
            margin-left: 10px;
            overflow-x: hidden;
            overflow-y: scroll;
            background-color: rgba(255, 255, 255, 0.8);
        }
        a{
            text-decoration: none;
            color:gray;
        }
        a:hover {
            background-color: #000;
            color: #fff;
        }
        span{
            text-decoration: none;
            color:gray;
        }
        .baixue{
            width: 370px;
            height: auto;
            
            /* border: 1px solid red; */
        }
        #sculpture{
            float: left;
            
        }
        #sculpture img{
            width: 40px;
            height: 40px;
            margin-top: 3px;
            margin-left: 5px;
            position: relative;
        }
        #user{
            display: flex;
            align-items: center;
            position: relative;
            margin-left: 45px;
            margin-top: 10px;
        }
        #welcome{
            display: flex;
            align-items: center;
            position: relative;
            margin-left: 45px;
            margin-top: 10px;
           
           
        }
        #datetime{
            float: left;
            position: relative;
            margin-left: 45px;
            margin-top: 10px;
            color:gray;
            font-size: 10px;
        }
        #answer{
            
            position: relative;
            margin-left: 190px;
            margin-top: 10px;
            font-size: 10px;
        }
        .xinhua{
            width: 370px;
            height: auto;
            /* border: 1px solid red; */
            position: relative;
            margin-top: 10px;
            margin-left: 40px;
        }
        #answer-xinhua{
           
            position: relative;
            margin-left: 150px;
            margin-top: 10px;
            font-size: 10px;
        }
        #answer-xinhua a{
           
           margin-left: 0px;
           font-size: 10px;
       }
       #answer-xinhua span{
           
           margin-left: 0px;
           font-size: 10px;
       }
        .bala{
            width: 370px;
            height: auto;
            /* border: 1px solid red; */
            position: relative;
            margin-top: 10px;
            margin-left: 40px;
        }
        .deliver{
            width: 360px;
            height: 80px;
            /* border: 1px solid red; */
            position: absolute;
            bottom: 0;
            
            
            /* margin-left: 40px; */
            border-radius: 10px;
            background-color: rgba(255, 255, 255,0.8);
            padding: 20px;
        }
        #commentarea{
            position: relative;
            float: left;
            /* margin-left: 50px; */
        }
        #send{
            margin-top: 15px;
            float: left;
            position: relative;
            /* margin-left: 270px; */
            
        }
        .title{
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="mydraft_list.html">草稿</a>
        <a href="myblog_list.html">我的文章</a>
        <a href="personal_center.html">个人中心</a>
        <a href="login.html">登录</a>
        <a href="javascript:logout()">注销</a>
    </div>
    <!-- 版心 -->
    <div class="container">

        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/doge.jpg" class="avtar" alt="" id="photo">
                <h3 id="username">123</h3>
                <a href="http:www.github.com" id="github">gitcb 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span id="artCount">2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 中间内容详情 -->
        <div class="container-right">
            
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title">我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date"> 
                    发布时间： <span id="updatetime">2021-06-02</span>&nbsp;&nbsp;
                    阅读量：<span id="rcount">1</span>
                </div>
                <!-- 博客正文 -->
                <div id="editorDiv">

                   
                </div>
                <div id="answer-xinhua">
                    <a href="javascript:addgoodart()" >赞:</a><span id="goodart">0</span>
                    <a href="javascript:addbadart()" >踩:</a><span id="badart">0</span>
                </div>
            </div>
        </div>

        <!-- 右侧评论 -->
        <div class="content" id="contentright">
            <h2>评论区</h2>
            <div class="baixue">
                <!-- 头像 -->
                <div id="sculpture">
                    <img src="img/doge.jpg" alt="">
                </div>
                <!-- 用户名 -->
                <div id="user">白雾茫茫</div>

                <!-- 内容 -->
                <div id="welcome">欢迎大家访问我的博客</div>
                <!-- 日期 -->
                <div id="datetime">2022-01-11</div>
                <div id="answer">
                    <a href="javascript:replay(此评论id)">回复</a>
                    <a href="javascript:good(此评论id)">赞:</a><span>0</span>
                    <a href="javascript:bad(此评论id)">踩:</a><span>0</span>
                    <a href="javascript:del(此评论id)">删除</a>
                </div>
            </div>
          

           
            <div class="xinhua">
                <!-- 头像 -->
                <div id="sculpture">
                    <img src="img/doge.jpg" alt="">
                </div>
                <!-- 用户名 -->
                <div id="user">心花为之怒放</div>
                <!-- 内容 -->
                <div id="welcome">太帅了</div>
                <!-- 日期 -->
                <div id="datetime">2022-01-17</div>
                <div id="answer-xinhua">
                    <span>回复</span>
                    赞:<span>0</span>
                    踩:<span>0</span>
                </div>
            </div>
            <!-- <div class="bala">
               
                <div id="sculpture">
                    <img src="img/doge.jpg" alt="">
                </div>
               
                <div id="user">巴拉巴拉小巴拉</div>
              
                <div id="welcome">我想问一下</div>
             
                <div id="datetime">2022-06-13</div>
                <div id="answer-xinhua">
                    <span>回复</span>
                    赞:<span>0</span>
                    踩:<span>0</span>
                </div>
            </div> -->

          
      
    

              <!-- 输入评论信息 -->
            <div class="deliver">
                <div id="sculpture">
                    <img src="img/doge.jpg" alt="">
                </div>
                <div id="commentarea">
                    <textarea name="text" id="commentareatexter" cols="40" rows="3" placeholder="在此发布评论"></textarea>
                </div>
                <div id="send">
                    <button onclick="addcomments()">发送</button>
                </div>
            </div>
            
        </div>
      
    </div>

    <script type="text/javascript">
        var editormd;
        // 将md的内容转成html的内容
        function initEdit(md){
            editormd = editormd.markdownToHTML("editorDiv", {
            markdown : md, // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
            });
        }


        //展示文章的赞/踩数量
        function showret(){
            var id = getUrlValue("id");
            if(id=="" || id<=0){
                alert("非法参数");
                return;
            }
            jQuery.ajax({
                url:"/art/detail",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null&&result.code==200){
                        jQuery("#goodart").text(result.data.gcount);
                        jQuery("#badart").text(result.data.bcount);
                    }else{
                        alert("文章点赞数量获取失败");
                    }
                }
            });

          
        }
        showret();

        function addgoodart(){
            var id = getUrlValue("id");
            if(id=="" || id<=0){
                alert("非法参数");
                return;
            }
            jQuery.ajax({
                url:"/art/addgoodcount",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null&&result.code==200){
                        showret();
                    }else{
                        alert("点赞失败");
                    }
                
                }
            });
        }
        function addbadart(){
            var id = getUrlValue("id");
            if(id=="" || id<=0){
                alert("非法参数");
                return;
            }
            jQuery.ajax({
                url:"/art/addbadcount",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null&&result.code==200&&result.data!=null){
                        showret();
                    }else{
                        alert("踩文章失败");
                    }
                
                }
            });
        }






        //查询用户详细信息
        function showUser(id){
            jQuery.ajax({
                url:"/user/getuserbyid",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code == 200 && result.data.id>0){
                        jQuery("#photo").attr("src",result.data.photo);
                        jQuery("#github").attr("href",result.data.github);
                        jQuery("#github").text(result.data.github);
                        jQuery("#username").text(result.data.username); 
                        jQuery("#artCount").text(result.data.artCount); 
                    }else{
                        alert("个人信息加载失败，请刷新");
                    }
                }
            });
        }
 


        function getArtDetail(id){
            if(id==""){
                alert("非法参数");
                return;
            }
            jQuery.ajax({
                url:"/art/detail",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code == 200){
                        jQuery("#title").html(result.data.title);
                        jQuery("#updatetime").html(result.data.updatetime);
                        jQuery("#rcount").html(result.data.rcount);
                        initEdit(result.data.content)
                       
                        //展示用户的信息
                        showUser(result.data.uid);

                    }else{
                        alert("查询失败，请重试!");
                    }
                }
            });

        }
        getArtDetail(getUrlValue("id"));

     


        //阅读量+1
        function updataRCount(){
            //先得到文章id
            var id = getUrlValue("id");
            if(id != ""){
                jQuery.ajax({
                    url:"/art/incr-rcount",
                    type:"POST",
                    data:{"id":id},
                    success:function(result){

                    }
                });
            }
          
        }
        updataRCount();



        //发布一级评论
        function addcomments(){
            //获取文本框中的内容
            var content = commentareatexter.value;
            //获取当前文章id，传到后端获取用户id
            var id = getUrlValue("id");
            //判断是否有内容
            if(content==""){
                alert("请先输入评论内容");
                return;
            }
            //判断id合法性
            if(id<=0 || id == ""){
                alert("评论失败,请重试");
            }
            //通过Ajax向后端发送数据
            jQuery.ajax({
                url:"/comments/addcomments",
                type:"POST",
                data:{"aid":id,"content":content},
                success:function(result){
                    if(result!=null && result.code==200 && result.data!=null){
                        alert("添加评论成功");
                        showcomments();
                        return;
                    }else{
                        alert(result.msg);
                        return;
                    }
                }
            });


        }

        //根据每条数据的用户id，再找用户名  
        function getusernamebyuid(uid){
            //非空校验
            var username="";
            jQuery.ajax({
                url:"/user/getusernamebyuid",
                type:"POST",
                data:{"uid":uid},
                success:function(result){
                    if(result!=null&&result.code==200&&result.data!=null){
                        username = result.msg;
                        // alert(username);
                    }
                },
                async:false
            });
            return username;
        }
        //根据每天回复的rid，找到对应的回复用户名
        function getusernamebyrid(rid){
            //非空校验
            if(rid==""){
                return "";
            }
            var username="";
            jQuery.ajax({
                url:"/user/getusernamebyrid",
                type:"POST",
                data:{"rid":rid},
                success:function(result){
                    if(result!=null&&result.code==200&&result.data!=null){
                        username = "-->" + result.msg;
                        // alert(username);
                    }
                },
                async:false
            });
            return username;
        }


//二级评论的-----------------------

        //回复评论
        //点击回复按钮，聚焦输入框，修改点击发送调用的函数，
        //点击发送，将回复的内容发送到后端 发送成功后将发送按钮内的发送函数复原
        //服务器根据传来的回复内容，评论id（cid），再获取当前登录的用户id（uid），再创建回复时间，然后插入到replaycomments数据库中
        //前端发送到后端数据：回复内容，评论id（aid）
        function replay2(rid){
            commentareatexter.focus();
            //判断rid合法性
            if(rid<=0||rid==""){
                alert("回复失败");
            }
            //修改发送按钮里面的函数 为 addreplaycomments(cid)
            jQuery("#send").html('<button id="submitcomments" onclick="addreplaycomments2('+ rid +')">回复</button>');
        }

        //再点击回复按钮，向服务器发送数据
        function addreplaycomments2(rid){
            //判断rid合法性
            if(rid<=0||rid==""){
                alert("回复失败");
                return;
            }
            //获取回复内容
            var content = commentareatexter.value;
            if(content==""){
                alert("请先输入回复内容");
                commentareatexter.focus();
                return;
            } 
            //向服务器发送数据
            jQuery.ajax({
                url:"/comments/addreplaycomments2",
                type:"POST",
                data:{"rid":rid,"content":content},
                success:function(result){
                    if(result!=null&&result.code==200&&result.data!=null){
                        alert("回复成功");
                        showcomments();
                         //最后再将回复按钮改为发送按钮
                        jQuery("#send").html('<button id="submitcomments" onclick="addcomments()">发送</button>');
                    }else{
                        alert(result.msg);
                    }
                }
            });
           
        }



         //赞
         function good2(id){
            jQuery.ajax({
                url:"/comments/addgcount2",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code == 200 && result.data!=null){
                        showcomments();
                    }
                   
                }
            });

        }

         //踩
         function bad2(id){
            jQuery.ajax({
                url:"/comments/addbcount2",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code == 200 && result.data!=null){
                        showcomments();
                    }
                }
            });

        }

        //删除    
        //只能登录之后删除，并且删除只能删除自己的评论   向服务器传此评论id，当前文章id（aid）
        //根据评论id，找到所属作者id（uid），再判断uid和当前登录用户id是否相同，相同则删除，不同则返回您没有权限删除此评论
        //                                 找到对应作者id后，判断当前登录id是否是作者id，如果是，则可以删除任意评论
        //前端传数据为 当前评论id，文章id（aid）
        function del2(id){
            //判断id合法性
            if(id==""||id<=0){
                alert("删除失败");
                return;
            }

            //获取当前文章id（aid）
            var aid = getUrlValue("id");
            // alert("文章id为"+aid); 
            jQuery.ajax({
                url:"/comments/delcomments2",
                type:"POST",
                data:{"id":id,"aid":aid},
                success:function(result){
                    if(result!=null&& result.code==200&&result.data!=null){
                        alert("删除成功");
                        showcomments();
                    }else{
                        alert(result.msg);
                    }
                }
                

            });
        }



        //根据评论id，从数据库中找到该评论的回复
        function getreplaycomments(id){
            if(id=="" || id<=0){
                alert("评论回复列表加载失败");
                return "";
            }
            var commnetsListHtml = '';
            jQuery.ajax({
                url:"/comments/getreplaycomments",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code==200 && result.data!=null){
                        // 将replay.data中的回复列表循环加入到commentsListHtml
                        for(var j=0; j<result.data.length; j++){
                            var repalycommentsinfo = result.data[j];
                            commnetsListHtml += '<div class="xinhua">';
                            commnetsListHtml += '<div id="sculpture">';
                            commnetsListHtml += '<img src="'+ repalycommentsinfo.photo +'" alt="">';
                            commnetsListHtml += '</div>';                           //回复评论的人的用户名                         //找回复的谁的用户名-根据cid找到对应评论，再根据对应评论的uid，找用户名
                            commnetsListHtml += '<div id="user">'+ getusernamebyuid(repalycommentsinfo.uid) + getusernamebyrid(repalycommentsinfo.rid) +'</div>';
                            commnetsListHtml += '<div id="welcome">'+ repalycommentsinfo.content+'</div>';
                            commnetsListHtml += '<div id="datetime">'+ repalycommentsinfo.createtime+'</div>';
                            commnetsListHtml += ' <div id="answer-xinhua">';
                            commnetsListHtml += '<a href="javascript:replay2('+repalycommentsinfo.id +')">回复&nbsp&nbsp</a>';
                            commnetsListHtml += '<a href="javascript:good2('+repalycommentsinfo.id +')">赞:</a><span id="good">'+repalycommentsinfo.gcount+'&nbsp&nbsp</span>';
                            commnetsListHtml += '<a href="javascript:bad2('+repalycommentsinfo.id +')">踩:</a><span id ="bad">'+repalycommentsinfo.bcount+'&nbsp&nbsp</span>';
                            commnetsListHtml += '<a href="javascript:del2('+repalycommentsinfo.id +')">删除</a>';
                            commnetsListHtml += '</div>';
                            commnetsListHtml += '</div>';
                            
                        } 
                    }
                },
                async:false
            });
            return commnetsListHtml;

        }



        //显示评论信息
        function showcomments(){
            //获取文章id，根据文章id到评论表中查找对应评论
            var id = getUrlValue("id");
            //合法性判断
            if(id==""||id<=0){
                alert("获取评论失败，请重试");
                return;
            }
            

            //通过Ajax向服务器发送请求获取数据
            jQuery.ajax({
                url:"/comments/getcomments",
                type:"POST",
                data:{"aid":id},
                success:function(result) {
                    if(result!=null && result.code==200 && result.data!=null){
                        //将result.data里面的评论信息展示出来
                        //使用for循环
                        var commnetsListHtml ='';
                        commnetsListHtml +='<h2>评论区</h2>';
                        for(var i=0;i<result.data.length;i++){
                            var commentsinfo = result.data[i];
                            commnetsListHtml += '<div class="baixue">';
                            commnetsListHtml += '<div id="sculpture">';
                            commnetsListHtml += '<img src="'+ commentsinfo.photo +'" alt="">';
                            commnetsListHtml += '</div>';
                            //根据每天数据的用户id，再找用户名         从用户表里面直接找id为这个的用户名
                            commnetsListHtml += '<div id="user">'+ getusernamebyuid(commentsinfo.uid) +'</div>';
                            commnetsListHtml += '<div id="welcome">' + commentsinfo.content +'</div>';
                            commnetsListHtml += '<div id="datetime">'+ commentsinfo.createtime+'</div>';
                            commnetsListHtml += '<div id="answer">';
                            commnetsListHtml += '<a href="javascript:replay1('+commentsinfo.id +')">回复&nbsp&nbsp</a>';
                            commnetsListHtml += '<a href="javascript:good1('+commentsinfo.id +')">赞:</a><span id="good">'+commentsinfo.gcount+'&nbsp&nbsp</span>';
                            commnetsListHtml += '<a href="javascript:bad1('+commentsinfo.id +')">踩:</a><span id ="bad">'+commentsinfo.bcount+'&nbsp&nbsp</span>';
                            commnetsListHtml += '<a href="javascript:del1('+commentsinfo.id +')">删除</a>';
                            commnetsListHtml += '</div>';
                            commnetsListHtml += '</div>';

                            //判断当前评论下面是否有回复，如果有则继续添加对应标签
                            //向服务器传入当前评论的id，根据当前评论id从replaycomments表中查找回复列表
                            var tmpHtml =  getreplaycomments(commentsinfo.id);
                            // alert(tmpHtml);
                            // alert(replay.data.length);
                            // alert(result.data.length);
                            commnetsListHtml += tmpHtml;
                            
                        }
                            //添加最后的评论控件
                            commnetsListHtml += '<div class="deliver">';
                            commnetsListHtml += '<div id="sculpture">';
                            commnetsListHtml += '<img src="img/doge.jpg" id="commentsphoto" alt="">';
                            commnetsListHtml += '</div>';
                            commnetsListHtml += '<div id="commentarea">';
                            commnetsListHtml += '<textarea name="text" id="commentareatexter" cols="40" rows="3" placeholder="在此发布评论"></textarea>';
                            commnetsListHtml += '</div>';
                            commnetsListHtml += '<div id="send">';
                            commnetsListHtml += '<button id="submitcomments" onclick="addcomments()">发送</button>';
                            commnetsListHtml += '</div>';
                            commnetsListHtml += '</div>';
                         
                        
                        jQuery("#contentright").html(commnetsListHtml);



                    }else{
                        alert("获取评论失败");
                        return;
                    }
                }
            });



        }
        showcomments();


        //回复评论
        //点击回复按钮，聚焦输入框，修改点击发送调用的函数，
        //点击发送，将回复的内容发送到后端 发送成功后将发送按钮内的发送函数复原
        //服务器根据传来的回复内容，评论id（cid），再获取当前登录的用户id（uid），再创建回复时间，然后插入到replaycomments数据库中
        //前端发送到后端数据：回复内容，评论id（aid）
        function replay1(cid){
            commentareatexter.focus();
            //判断cid合法性
            if(cid<=0||cid==""){
                alert("回复失败");
            }
            //修改发送按钮里面的函数 为 addreplaycomments(cid)
            jQuery("#send").html('<button id="submitcomments" onclick="addreplaycomments('+ cid +')">回复</button>');
        }

        //再点击回复按钮，向服务器发送数据
        function addreplaycomments(cid){
            //判断cid合法性
            if(cid<=0||cid==""){
                alert("回复失败");
                return;
            }
            //获取回复内容
            var content = commentareatexter.value;
            if(content==""){
                alert("请先输入回复内容");
                commentareatexter.focus();
                return;
            } 
            //向服务器发送数据
            jQuery.ajax({
                url:"/comments/addreplaycomments",
                type:"POST",
                data:{"cid":cid,"content":content},
                success:function(result){
                    if(result!=null&&result.code==200&&result.data!=null){
                        alert("回复成功");
                        showcomments();
                        //最后再将回复按钮改为发送按钮
                        jQuery("#send").html('<button id="submitcomments" onclick="addcomments()">发送</button>');
                    }else{
                        alert(result.msg);
                    }
                }
            });
            
        }






//一级评论的---------------------

        //赞
        function good1(id){
            jQuery.ajax({
                url:"/comments/addgcount",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code == 200 && result.data!=null){
                        showcomments();
                    }
                   
                }
            });

        }

         //踩
         function bad1(id){
            jQuery.ajax({
                url:"/comments/addbcount",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code == 200 && result.data!=null){
                        showcomments();
                    }
                }
            });

        }

        //删除    
        //只能登录之后删除，并且删除只能删除自己的评论   向服务器传此评论id，当前文章id（aid）
        //根据评论id，找到所属作者id（uid），再判断uid和当前登录用户id是否相同，相同则删除，不同则返回您没有权限删除此评论
        //                                 找到对应作者id后，判断当前登录id是否是作者id，如果是，则可以删除任意评论
        //前端传数据为 当前评论id，文章id（aid）
        function del1(id){
            //判断id合法性
            if(id==""||id<=0){
                alert("删除失败");
                return;
            }

            //获取当前文章id（aid）
            var aid = getUrlValue("id");
            // alert("文章id为"+aid); 
            jQuery.ajax({
                url:"/comments/delcomments",
                type:"POST",
                data:{"id":id,"aid":aid},
                success:function(result){
                    if(result!=null&& result.code==200&&result.data!=null){
                        alert("删除成功");
                        showcomments();
                    }else{
                        alert(result.msg);
                    }
                }
                

            });
        }




        
</script> 




</body>

</html>